import { Swiper } from "antd-mobile";
import home_1_img from "../../assets/imgs/home1.jpg";
import home_2_img from "../../assets/imgs/home2.jpg";
import "./index.css";

function HomeSwiper() {

  const swiperItems = [{
    color: 'rgba(1, 13, 45, 1)',
    img: home_2_img,
    text: ['追求卓越 互惠双赢', '澄城海泰']
  }, {
    color: 'rgba(1, 13, 45, 1)',
    img: home_1_img,
    text: ['诚信务实 品质为先', '']
  },]
  const items = swiperItems.map((swiperItem, index) => (
    <Swiper.Item key={index}>
      <div className="content" style={{ background: swiperItem.color }}>
        <img src={swiperItem.img} style={{ width: "100%" }} />
        {swiperItem.text && (
          <div className="text-overlay">
            {swiperItem.text.map((line, lineIndex) => (
              <div key={lineIndex} className="text-line">
                {line}
              </div>
            ))}
          </div>
        )}
      </div>
    </Swiper.Item>
  ));

  return (
    <Swiper
      loop
      onIndexChange={(i) => {
        console.log(i, "onIndexChange1");
      }}
    >
      {items}
    </Swiper>
  );
}

export default HomeSwiper;